<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>生鲜超市</title>
  <link rel="icon" type="image/png" sizes="144x144" href="image/logo.png"/>
  <link rel="stylesheet" href="dist/css/layui.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
   <div class="layui-head">
   	   <div class="layui-site-nav">
   	   	    <ul>
   	   	    	<li><span>亲，请登录哟！</span></li>
   	   	    </ul>
   	   </div>
   </div>
   <div class="search">
   	    <span class="name">每日生鲜</span>
   	    <div class="search-main">
   	    	<input type="text" placeholder="请输入您的菜"/>
   	    	<span><img src="image/search.png"></span>
   	    </div>
   </div>
   <div class="layui-index">
   	  <!--  轮播图 -->
   	  <div class="layui-row" style="position: relative;">
	   	  	<div class="layui-carousel" id="carousel">
				  <div carousel-item>
				    <div><img src="image/carousel/lunb1.png"></div>
				    <div><img src="image/carousel/lunb2.png"></div>
				    <div><img src="image/carousel/lunb3.png"></div>
				  </div>
			</div>
			<!-- 悬浮导航栏-->
			<div class="layui-tab">
			  <ul class="layui-tab-title">
			    <li><span>蔬菜</span><img src="image/carousel/right.png"></li>
			    <li><span>鱼肉</span><img src="image/carousel/right.png"></li>
			    <li><span>素食</span><img src="image/carousel/right.png"></li>
			    <li><span>日用品</span><img src="image/carousel/right.png"></li>
			    <li><span>海底世界</span><img src="image/carousel/right.png"></li>
			  </ul>
			  <div class="layui-tab-content">
			    <div class="layui-tab-item">内容1</div>
			    <div class="layui-tab-item">内容2</div>
			    <div class="layui-tab-item">内容3</div>
			    <div class="layui-tab-item">内容4</div>
			    <div class="layui-tab-item">内容5</div>
			  </div>
			</div>
   	  </div>

   	  <div class="layui-container">
   	  	   <div class="layui-row">
             <span class="activity1">今日活动</span>
           	  <div class="more">
           	  	<span>更多</span>
           	  	<img src="image/more.png" style="width: 11px;">
           	  </div>
   	  	   </div>
           <div class="layui-row">
           	  <ul class="ul-today">
           	  	<li>
           	  		<img src="image/product/fruit.png">
           	  	</li>
           	  </ul>
           </div>
   	  </div>

   </div>

 
<script src="dist/layui.js"></script>
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>
<script>
	layui.use(['layer','carousel'], function(){
	  var layer = layui.layer
	  ,carousel = layui.carousel;


	  //建造实例
	  carousel.render({
	    elem: '#carousel'
	    ,width: '100%' //设置容器宽度
	    ,arrow: 'none' //始终显示箭头
	    ,height: '550px'
	    //,anim: 'updown' //切换动画方式
	  });
	
	});
</script> 
</body>
</html>